<template>
  <v-chart :option="option"></v-chart>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import 'echarts-wordcloud'
import { getKeywordsData } from '@/api/index'

const option = ref({})

const renderChart = (data) => {
  option.value = {
    tooltip:{},
    series: {
      name:'搜索量',
      type: 'wordCloud',
      // 要求数据结构[{name: '词1', value: 100}, {name: '词2', value: 100},...]
      data: data,
      width: '100%',
      height: '100%',
      textStyle:{
        color(){
            return `rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`
        }
      },
      // 强调高亮效果
      emphasis: {
        focus: 'self',
        textStyle: {
          textShadowBlur: 5,
          textShadowColor: '#333',
        },
      },
    },
  }
}

onMounted(async() => {
    const res=await getKeywordsData()
    const data=res.map((item)=>{
        return{
            name:item.keyWord,
            value:item.totalSearch,
        }
    })
    // console.log('词云数据:', data); 
    renderChart(data)
})
</script>

<style scoped>
.el-chart{
    height: 600px
}
</style>
